<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .page {
            display: none;
            height: 100vh;
            width: 100%;
            overflow-y: auto;
        }
        .active {
            display: block;
        }
        .navbar {
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        
        <!-- 首页 -->
        <div id="home-page" class="page active">
            <!-- 顶部导航栏 -->
            <div class="bg-pink-600 text-white p-4 shadow-md">
                <h1 class="text-xl font-bold text-center">漫展约拍</h1>
            </div>
            
            <!-- 轮播图 -->
            <div class="relative h-48 bg-gray-200 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1570654621852-9dd25b76b38d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="漫展摄影" class="w-full h-full object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-40 text-white p-2">
                    <p class="text-sm">2024夏日漫展摄影师预约中</p>
                </div>
            </div>
            
            <!-- 功能区 -->
            <div class="grid grid-cols-4 gap-2 p-4 text-center">
                <div class="p-2" onclick="showPage('photographers-page')">
                    <div class="bg-pink-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-pink-600">camera_alt</span>
                    </div>
                    <span class="text-xs">摄影师</span>
                </div>
                <div class="p-2" onclick="showPage('exhibitions-page')">
                    <div class="bg-blue-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-blue-600">event</span>
                    </div>
                    <span class="text-xs">漫展活动</span>
                </div>
                <div class="p-2" onclick="showPage('orders-page')">
                    <div class="bg-green-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-green-600">assignment</span>
                    </div>
                    <span class="text-xs">我的订单</span>
                </div>
                <div class="p-2" onclick="showPage('profile-page')">
                    <div class="bg-purple-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-purple-600">person</span>
                    </div>
                    <span class="text-xs">个人中心</span>
                </div>
            </div>
            
            <!-- 热门摄影师 -->
            <div class="p-4">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="font-bold">热门摄影师</h2>
                    <a class="text-pink-600 text-sm" onclick="showPage('photographers-page')">查看全部</a>
                </div>
                <div class="flex overflow-x-auto space-x-4 pb-2">
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">樱花摄影</p>
                        <p class="text-xs text-gray-500">人物写真</p>
                    </div>
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1554048612-b6a482bc67e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">星空影像</p>
                        <p class="text-xs text-gray-500">场景特写</p>
                    </div>
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">阳光工作室</p>
                        <p class="text-xs text-gray-500">团体摄影</p>
                    </div>
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">青柠摄影</p>
                        <p class="text-xs text-gray-500">COS专业</p>
                    </div>
                </div>
            </div>
            
            <!-- 近期漫展 -->
            <div class="p-4">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="font-bold">近期漫展</h2>
                    <a class="text-pink-600 text-sm" onclick="showPage('exhibitions-page')">查看全部</a>
                </div>
                <div class="space-y-3">
                    <div class="bg-white rounded-lg shadow p-3 flex">
                        <img src="https://images.unsplash.com/photo-1594083263764-c31e4c4512cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=150&q=80" class="w-20 h-20 object-cover rounded-md">
                        <div class="ml-3 flex-1">
                            <h3 class="font-medium">2024夏日动漫节</h3>
                            <p class="text-xs text-gray-500 mt-1">北京国际会展中心</p>
                            <p class="text-xs text-gray-500">7月15日-7月17日</p>
                            <span class="inline-block bg-pink-100 text-pink-600 text-xs px-2 py-0.5 rounded mt-1">热门</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow p-3 flex">
                        <img src="https://images.unsplash.com/photo-1601931935821-5fbe71157695?ixlib=rb-1.2.1&auto=format&fit=crop&w=150&q=80" class="w-20 h-20 object-cover rounded-md">
                        <div class="ml-3 flex-1">
                            <h3 class="font-medium">第十二届ChinaJoy</h3>
                            <p class="text-xs text-gray-500 mt-1">上海新国际博览中心</p>
                            <p class="text-xs text-gray-500">8月1日-8月4日</p>
                            <span class="inline-block bg-green-100 text-green-600 text-xs px-2 py-0.5 rounded mt-1">预售中</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部导航栏 -->
            <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white navbar">
                <div class="flex justify-around p-3">
                    <div class="text-center text-pink-600">
                        <span class="material-icons block mx-auto">home</span>
                        <span class="text-xs">首页</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('photographers-page')">
                        <span class="material-icons block mx-auto">camera_alt</span>
                        <span class="text-xs">摄影师</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('orders-page')">
                        <span class="material-icons block mx-auto">assignment</span>
                        <span class="text-xs">订单</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('profile-page')">
                        <span class="material-icons block mx-auto">person</span>
                        <span class="text-xs">我的</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 登录页 -->
        <div id="login-page" class="page">
            <div class="p-4">
                <div class="flex justify-center items-center h-16">
                    <h1 class="text-2xl font-bold text-pink-600">漫展约拍</h1>
                </div>
                
                <div class="mt-8">
                    <img src="https://images.unsplash.com/photo-1527866512907-a35a62a0f6c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" class="w-48 h-48 object-cover rounded-full mx-auto">
                </div>
                
                <div class="mt-10 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请输入手机号">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请输入密码">
                    </div>
                    <div class="pt-4">
                        <button class="w-full bg-pink-600 text-white py-3 rounded-lg font-medium" onclick="showPage('home-page')">登录</button>
                    </div>
                    <div class="flex justify-between text-sm">
                        <a class="text-gray-500" onclick="showPage('register-page')">新用户注册</a>
                        <a class="text-gray-500">忘记密码</a>
                    </div>
                </div>
                
                <div class="mt-8">
                    <div class="relative">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-gray-300"></div>
                        </div>
                        <div class="relative flex justify-center text-sm">
                            <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                        </div>
                    </div>
                    
                    <div class="mt-6 grid grid-cols-3 gap-3">
                        <div class="text-center">
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-green-100">
                                <span class="material-icons text-green-600">wechat</span>
                            </div>
                            <p class="mt-1 text-xs">微信</p>
                        </div>
                        <div class="text-center">
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-blue-100">
                                <span class="material-icons text-blue-600">stay_current_portrait</span>
                            </div>
                            <p class="mt-1 text-xs">短信</p>
                        </div>
                        <div class="text-center">
                            <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-red-100">
                                <span class="material-icons text-red-600">email</span>
                            </div>
                            <p class="mt-1 text-xs">邮箱</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 注册页 -->
        <div id="register-page" class="page">
            <div class="p-4">
                <div class="flex items-center h-16">
                    <span class="material-icons" onclick="showPage('login-page')">arrow_back</span>
                    <h1 class="text-xl font-bold ml-4">新用户注册</h1>
                </div>
                
                <div class="mt-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请输入手机号">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                        <div class="flex">
                            <input type="text" class="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请输入验证码">
                            <button class="ml-2 px-4 bg-pink-600 text-white rounded-lg whitespace-nowrap">获取验证码</button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请设置密码">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                        <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请再次输入密码">
                    </div>
                    
                    <div class="flex items-center mt-4">
                        <input type="checkbox" id="agree" class="h-4 w-4 text-pink-600 border-gray-300 rounded">
                        <label for="agree" class="ml-2 block text-sm text-gray-700">
                            我已阅读并同意<a class="text-pink-600">《用户协议》</a>和<a class="text-pink-600">《隐私政策》</a>
                        </label>
                    </div>
                    
                    <div class="pt-4">
                        <button class="w-full bg-pink-600 text-white py-3 rounded-lg font-medium" onclick="showPage('home-page')">注册</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 摄影师列表页 -->
        <div id="photographers-page" class="page">
            <!-- 顶部导航栏 -->
            <div class="bg-white p-4 shadow-md flex items-center">
                <span class="material-icons" onclick="showPage('home-page')">arrow_back</span>
                <h1 class="text-xl font-bold ml-4">摄影师列表</h1>
            </div>

            <!-- 搜索栏 -->
            <div class="p-4 bg-white sticky top-0 z-10 shadow-sm">
                <div class="flex bg-gray-100 rounded-full p-2 items-center">
                    <span class="material-icons text-gray-400 mx-2">search</span>
                    <input type="text" placeholder="搜索摄影师、风格" class="bg-transparent focus:outline-none flex-1">
                </div>
            </div>

            <!-- 筛选栏 -->
            <div class="flex p-2 bg-white overflow-x-auto whitespace-nowrap">
                <div class="px-3 py-1 mx-1 text-sm rounded-full bg-pink-600 text-white">全部</div>
                <div class="px-3 py-1 mx-1 text-sm rounded-full bg-gray-100">人物写真</div>
                <div class="px-3 py-1 mx-1 text-sm rounded-full bg-gray-100">场景特写</div>
                <div class="px-3 py-1 mx-1 text-sm rounded-full bg-gray-100">团体摄影</div>
                <div class="px-3 py-1 mx-1 text-sm rounded-full bg-gray-100">COS专业</div>
                <div class="px-3 py-1 mx-1 text-sm rounded-full bg-gray-100">其他类型</div>
            </div>

            <!-- 摄影师列表 -->
            <div class="p-4 space-y-4 pb-20">
                <div class="bg-white rounded-lg shadow p-4" onclick="showPage('photographer-detail-page')">
                    <div class="flex">
                        <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-20 h-20 object-cover rounded-full">
                        <div class="ml-4 flex-1">
                            <div class="flex justify-between">
                                <h3 class="font-medium">樱花摄影</h3>
                                <span class="text-pink-600">¥199起</span>
                            </div>
                            <div class="flex items-center mt-1">
                                <span class="text-yellow-400 text-sm">★★★★★</span>
                                <span class="text-gray-500 text-xs ml-1">5.0 (94评)</span>
                            </div>
                            <div class="mt-1">
                                <span class="inline-block bg-pink-100 text-pink-600 text-xs px-2 py-0.5 rounded mr-1">人物写真</span>
                                <span class="inline-block bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded">接单中</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 grid grid-cols-3 gap-2">
                        <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                        <img src="https://images.unsplash.com/photo-1563306406-e66174fa3787?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                        <img src="https://images.unsplash.com/photo-1602480370486-ddc38525944a?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow p-4">
                    <div class="flex">
                        <img src="https://images.unsplash.com/photo-1554048612-b6a482bc67e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-20 h-20 object-cover rounded-full">
                        <div class="ml-4 flex-1">
                            <div class="flex justify-between">
                                <h3 class="font-medium">星空影像</h3>
                                <span class="text-pink-600">¥299起</span>
                            </div>
                            <div class="flex items-center mt-1">
                                <span class="text-yellow-400 text-sm">★★★★☆</span>
                                <span class="text-gray-500 text-xs ml-1">4.8 (76评)</span>
                            </div>
                            <div class="mt-1">
                                <span class="inline-block bg-pink-100 text-pink-600 text-xs px-2 py-0.5 rounded mr-1">场景特写</span>
                                <span class="inline-block bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded">接单中</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 grid grid-cols-3 gap-2">
                        <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                        <img src="https://images.unsplash.com/photo-1610296669228-602fa827fc1f?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                        <img src="https://images.unsplash.com/photo-1576699331397-55f16a758dbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow p-4">
                    <div class="flex">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-20 h-20 object-cover rounded-full">
                        <div class="ml-4 flex-1">
                            <div class="flex justify-between">
                                <h3 class="font-medium">阳光工作室</h3>
                                <span class="text-pink-600">¥259起</span>
                            </div>
                            <div class="flex items-center mt-1">
                                <span class="text-yellow-400 text-sm">★★★★★</span>
                                <span class="text-gray-500 text-xs ml-1">4.9 (125评)</span>
                            </div>
                            <div class="mt-1">
                                <span class="inline-block bg-pink-100 text-pink-600 text-xs px-2 py-0.5 rounded mr-1">团体摄影</span>
                                <span class="inline-block bg-gray-100 text-gray-600 text-xs px-2 py-0.5 rounded">已约满</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 grid grid-cols-3 gap-2">
                        <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                        <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                        <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-24 object-cover rounded-md">
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white navbar">
                <div class="flex justify-around p-3">
                    <div class="text-center text-gray-500" onclick="showPage('home-page')">
                        <span class="material-icons block mx-auto">home</span>
                        <span class="text-xs">首页</span>
                    </div>
                    <div class="text-center text-pink-600">
                        <span class="material-icons block mx-auto">camera_alt</span>
                        <span class="text-xs">摄影师</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('orders-page')">
                        <span class="material-icons block mx-auto">assignment</span>
                        <span class="text-xs">订单</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('profile-page')">
                        <span class="material-icons block mx-auto">person</span>
                        <span class="text-xs">我的</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 摄影师详情页 -->
        <div id="photographer-detail-page" class="page">
            <!-- 顶部导航栏 -->
            <div class="bg-white p-4 shadow-md flex items-center justify-between">
                <span class="material-icons" onclick="showPage('photographers-page')">arrow_back</span>
                <h1 class="text-xl font-bold">摄影师详情</h1>
                <span class="material-icons">share</span>
            </div>

            <!-- 摄影师信息 -->
            <div class="relative">
                <div class="h-56 bg-gray-300">
                    <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover">
                </div>
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
                    <div class="flex items-end">
                        <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-20 h-20 object-cover rounded-full border-2 border-white">
                        <div class="ml-3">
                            <h2 class="text-xl font-bold">樱花摄影</h2>
                            <div class="flex items-center mt-1">
                                <span class="text-yellow-400 text-sm">★★★★★</span>
                                <span class="text-white text-opacity-80 text-xs ml-1">5.0 (94评)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 摄影师介绍 -->
            <div class="p-4 bg-white">
                <div class="flex space-x-3 mb-3">
                    <span class="inline-block bg-pink-100 text-pink-600 text-xs px-2 py-1 rounded">人物写真</span>
                    <span class="inline-block bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">3年经验</span>
                    <span class="inline-block bg-green-100 text-green-600 text-xs px-2 py-1 rounded">专业设备</span>
                </div>
                <p class="text-sm text-gray-600">专注于人物写真和Cosplay摄影，拥有专业摄影设备和后期修图技术。擅长抓取模特自然表情，打造出独特的氛围感。</p>
                
                <div class="flex items-center justify-between mt-4">
                    <div>
                        <p class="text-xs text-gray-500">已完成订单</p>
                        <p class="font-medium">356</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">作品数量</p>
                        <p class="font-medium">128</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">接单场次</p>
                        <p class="font-medium">42</p>
                    </div>
                </div>
            </div>

            <!-- 约拍套餐 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">约拍套餐</h3>
                <div class="space-y-3">
                    <div class="border border-gray-200 rounded-lg p-3">
                        <div class="flex justify-between">
                            <h4 class="font-medium">基础写真套餐</h4>
                            <span class="text-pink-600">¥199</span>
                        </div>
                        <ul class="mt-2 text-sm text-gray-600 space-y-1">
                            <li>· 30分钟拍摄时间</li>
                            <li>· 5张精修照片</li>
                            <li>· 电子版交付</li>
                        </ul>
                        <button class="mt-3 w-full py-2 bg-pink-600 text-white rounded-lg text-sm" onclick="showPage('booking-page')">预约</button>
                    </div>

                    <div class="border border-gray-200 rounded-lg p-3">
                        <div class="flex justify-between">
                            <h4 class="font-medium">高级写真套餐</h4>
                            <span class="text-pink-600">¥399</span>
                        </div>
                        <ul class="mt-2 text-sm text-gray-600 space-y-1">
                            <li>· 60分钟拍摄时间</li>
                            <li>· 10张精修照片</li>
                            <li>· 电子版+冲印4张</li>
                            <li>· 提供简易道具</li>
                        </ul>
                        <div class="mt-3 flex space-x-2">
                            <span class="inline-block bg-pink-100 text-pink-600 text-xs px-2 py-1 rounded">热门</span>
                            <span class="inline-block bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded">性价比高</span>
                        </div>
                        <button class="mt-3 w-full py-2 bg-pink-600 text-white rounded-lg text-sm" onclick="showPage('booking-page')">预约</button>
                    </div>

                    <div class="border border-gray-200 rounded-lg p-3">
                        <div class="flex justify-between">
                            <h4 class="font-medium">专业COS套餐</h4>
                            <span class="text-pink-600">¥599</span>
                        </div>
                        <ul class="mt-2 text-sm text-gray-600 space-y-1">
                            <li>· 90分钟拍摄时间</li>
                            <li>· 15张精修照片</li>
                            <li>· 电子版+冲印6张</li>
                            <li>· 提供专业道具和场景</li>
                            <li>· 后期特效处理</li>
                        </ul>
                        <button class="mt-3 w-full py-2 bg-pink-600 text-white rounded-lg text-sm" onclick="showPage('booking-page')">预约</button>
                    </div>
                </div>
            </div>

            <!-- 作品展示 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">作品展示</h3>
                <div class="grid grid-cols-3 gap-2">
                    <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-32 object-cover rounded-md">
                    <img src="https://images.unsplash.com/photo-1563306406-e66174fa3787?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-32 object-cover rounded-md">
                    <img src="https://images.unsplash.com/photo-1602480370486-ddc38525944a?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-32 object-cover rounded-md">
                    <img src="https://images.unsplash.com/photo-1562572159-4efc207f5aff?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-32 object-cover rounded-md">
                    <img src="https://images.unsplash.com/photo-1542596594-649edbc13630?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-32 object-cover rounded-md">
                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-full h-32 object-cover rounded-md">
                </div>
                <div class="mt-3 text-center">
                    <a class="text-pink-600 text-sm">查看更多作品 ></a>
                </div>
            </div>

            <!-- 评价 -->
            <div class="mt-2 p-4 bg-white mb-20">
                <div class="flex justify-between items-center mb-3">
                    <h3 class="font-bold">用户评价</h3>
                    <a class="text-pink-600 text-sm">全部评价 ></a>
                </div>
                <div class="space-y-4">
                    <div>
                        <div class="flex items-center">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
                            <div class="ml-3">
                                <h4 class="text-sm font-medium">小兔子</h4>
                                <div class="flex items-center mt-0.5">
                                    <span class="text-yellow-400 text-xs">★★★★★</span>
                                    <span class="text-gray-400 text-xs ml-1">2天前</span>
                                </div>
                            </div>
                        </div>
                        <p class="mt-2 text-sm text-gray-600">拍得真的很棒！很会引导动作，拍了很多自然的照片，修图效果也很满意，会推荐给朋友的！</p>
                        <div class="mt-2 flex space-x-2">
                            <img src="https://images.unsplash.com/photo-1563306406-e66174fa3787?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded-md">
                            <img src="https://images.unsplash.com/photo-1562572159-4efc207f5aff?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded-md">
                        </div>
                    </div>

                    <div>
                        <div class="flex items-center">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
                            <div class="ml-3">
                                <h4 class="text-sm font-medium">柠檬可乐</h4>
                                <div class="flex items-center mt-0.5">
                                    <span class="text-yellow-400 text-xs">★★★★★</span>
                                    <span class="text-gray-400 text-xs ml-1">1周前</span>
                                </div>
                            </div>
                        </div>
                        <p class="mt-2 text-sm text-gray-600">第一次cos拍摄，摄影师很耐心地指导姿势，氛围很轻松。修好的照片质量超出预期，拿到了很多适合发社交平台的美照！</p>
                    </div>
                </div>
            </div>

            <!-- 底部预约栏 -->
            <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white p-3 border-t flex justify-between items-center">
                <div>
                    <span class="text-xs text-gray-500">起价</span>
                    <span class="text-pink-600 font-bold text-xl">¥199</span>
                </div>
                <div class="flex space-x-2">
                    <button class="px-4 py-2 border border-pink-600 text-pink-600 rounded-full flex items-center">
                        <span class="material-icons text-sm mr-1">chat</span>
                        <span>咨询</span>
                    </button>
                    <button class="px-6 py-2 bg-pink-600 text-white rounded-full" onclick="showPage('booking-page')">立即预约</button>
                </div>
            </div>
        </div>

        <!-- 预约页面 -->
        <div id="booking-page" class="page">
            <!-- 顶部导航栏 -->
            <div class="bg-white p-4 shadow-md flex items-center">
                <span class="material-icons" onclick="showPage('photographer-detail-page')">arrow_back</span>
                <h1 class="text-xl font-bold ml-4">预约摄影师</h1>
            </div>

            <!-- 摄影师信息 -->
            <div class="p-4 bg-white">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-16 h-16 object-cover rounded-full">
                    <div class="ml-3">
                        <h2 class="font-bold">樱花摄影</h2>
                        <div class="flex items-center mt-1">
                            <span class="text-yellow-400 text-sm">★★★★★</span>
                            <span class="text-gray-500 text-xs ml-1">5.0 (94评)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 套餐选择 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">选择套餐</h3>
                <div class="space-y-3">
                    <div class="border border-pink-600 rounded-lg p-3">
                        <div class="flex items-center">
                            <input type="radio" id="package1" name="package" class="h-4 w-4 text-pink-600 border-gray-300" checked>
                            <label for="package1" class="ml-2 flex-1">
                                <div class="flex justify-between">
                                    <h4 class="font-medium">基础写真套餐</h4>
                                    <span class="text-pink-600">¥199</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">30分钟拍摄时间，5张精修照片</p>
                            </label>
                        </div>
                    </div>

                    <div class="border border-gray-200 rounded-lg p-3">
                        <div class="flex items-center">
                            <input type="radio" id="package2" name="package" class="h-4 w-4 text-pink-600 border-gray-300">
                            <label for="package2" class="ml-2 flex-1">
                                <div class="flex justify-between">
                                    <h4 class="font-medium">高级写真套餐</h4>
                                    <span class="text-pink-600">¥399</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">60分钟拍摄时间，10张精修照片，电子版+冲印4张</p>
                                <div class="mt-1">
                                    <span class="inline-block bg-pink-100 text-pink-600 text-xs px-2 py-0.5 rounded">热门</span>
                                </div>
                            </label>
                        </div>
                    </div>

                    <div class="border border-gray-200 rounded-lg p-3">
                        <div class="flex items-center">
                            <input type="radio" id="package3" name="package" class="h-4 w-4 text-pink-600 border-gray-300">
                            <label for="package3" class="ml-2 flex-1">
                                <div class="flex justify-between">
                                    <h4 class="font-medium">专业COS套餐</h4>
                                    <span class="text-pink-600">¥599</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">90分钟拍摄时间，15张精修照片，提供专业道具和场景</p>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 漫展选择 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">选择漫展活动</h3>
                <div class="border border-gray-200 rounded-lg p-3">
                    <div class="flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">2024夏日动漫节</h4>
                            <p class="text-xs text-gray-500 mt-1">北京国际会展中心</p>
                            <p class="text-xs text-gray-500">7月15日-7月17日</p>
                        </div>
                        <span class="material-icons text-gray-400">keyboard_arrow_right</span>
                    </div>
                </div>
            </div>

            <!-- 预约时间 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">选择预约时间</h3>
                <div class="mb-4">
                    <p class="text-sm font-medium mb-2">选择日期</p>
                    <div class="flex space-x-2 overflow-x-auto pb-2">
                        <div class="flex-shrink-0 w-16 h-20 border border-pink-600 rounded-lg flex flex-col items-center justify-center bg-pink-50">
                            <p class="text-pink-600 font-medium">7/15</p>
                            <p class="text-xs text-gray-500">周一</p>
                        </div>
                        <div class="flex-shrink-0 w-16 h-20 border border-gray-200 rounded-lg flex flex-col items-center justify-center">
                            <p class="font-medium">7/16</p>
                            <p class="text-xs text-gray-500">周二</p>
                        </div>
                        <div class="flex-shrink-0 w-16 h-20 border border-gray-200 rounded-lg flex flex-col items-center justify-center">
                            <p class="font-medium">7/17</p>
                            <p class="text-xs text-gray-500">周三</p>
                        </div>
                    </div>
                </div>

                <div>
                    <p class="text-sm font-medium mb-2">选择时间段</p>
                    <div class="grid grid-cols-3 gap-2">
                        <div class="border border-pink-600 rounded-lg p-2 text-center bg-pink-50">
                            <p class="text-pink-600 text-sm">10:00-10:30</p>
                        </div>
                        <div class="border border-gray-200 rounded-lg p-2 text-center">
                            <p class="text-sm">11:00-11:30</p>
                        </div>
                        <div class="border border-gray-200 rounded-lg p-2 text-center">
                            <p class="text-sm">13:00-13:30</p>
                        </div>
                        <div class="border border-gray-200 rounded-lg p-2 text-center">
                            <p class="text-sm">14:00-14:30</p>
                        </div>
                        <div class="border border-gray-200 rounded-lg p-2 text-center">
                            <p class="text-sm">15:00-15:30</p>
                        </div>
                        <div class="border border-gray-200 rounded-lg p-2 text-center">
                            <p class="text-sm">16:00-16:30</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 备注信息 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">备注信息</h3>
                <textarea placeholder="请填写拍摄要求、服装信息等..." class="w-full p-3 border border-gray-200 rounded-lg h-24 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent"></textarea>
            </div>

            <!-- 联系方式 -->
            <div class="mt-2 p-4 bg-white mb-24">
                <h3 class="font-bold mb-3">联系方式</h3>
                <div class="space-y-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">联系人</label>
                        <input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请输入姓名">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                        <input type="text" class="w-full p-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent" placeholder="请输入手机号">
                    </div>
                </div>
            </div>

            <!-- 底部结算栏 -->
            <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white p-3 border-t flex justify-between items-center">
                <div>
                    <span class="text-pink-600 font-bold text-xl">¥199</span>
                </div>
                <button class="px-6 py-2 bg-pink-600 text-white rounded-full" onclick="showPage('order-confirm-page')">提交预约</button>
            </div>
        </div>

        <!-- 订单确认页 -->
        <div id="order-confirm-page" class="page">
            <!-- 顶部导航栏 -->
            <div class="bg-white p-4 shadow-md flex items-center">
                <span class="material-icons" onclick="showPage('booking-page')">arrow_back</span>
                <h1 class="text-xl font-bold ml-4">确认订单</h1>
            </div>

            <!-- 摄影师信息 -->
            <div class="p-4 bg-white">
                <div class="flex">
                    <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-16 h-16 object-cover rounded-full">
                    <div class="ml-3">
                        <h2 class="font-bold">樱花摄影</h2>
                        <div class="flex items-center mt-1">
                            <span class="text-yellow-400 text-sm">★★★★★</span>
                            <span class="text-gray-500 text-xs ml-1">5.0 (94评)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单详情 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">订单详情</h3>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">套餐类型</span>
                        <span>基础写真套餐</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">漫展活动</span>
                        <span>2024夏日动漫节</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">预约日期</span>
                        <span>2024年7月15日</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">预约时间</span>
                        <span>10:00-10:30</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">联系人</span>
                        <span>张三</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">联系电话</span>
                        <span>138****6666</span>
                    </div>
                    <div class="border-t border-gray-100 pt-3">
                        <div class="flex justify-between font-bold">
                            <span>订单金额</span>
                            <span class="text-pink-600">¥199.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 支付方式 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">选择支付方式</h3>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-2 border-b">
                        <div class="flex items-center">
                            <div class="bg-green-500 text-white rounded-md p-1 flex items-center justify-center w-8 h-8">
                                <span class="material-icons text-sm">wechat</span>
                            </div>
                            <span class="ml-3">微信支付</span>
                        </div>
                        <input type="radio" name="payment" class="h-4 w-4 text-pink-600 border-gray-300" checked>
                    </div>
                    <div class="flex items-center justify-between p-2 border-b">
                        <div class="flex items-center">
                            <div class="bg-blue-500 text-white rounded-md p-1 flex items-center justify-center w-8 h-8">
                                <span class="material-icons text-sm">payment</span>
                            </div>
                            <span class="ml-3">支付宝</span>
                        </div>
                        <input type="radio" name="payment" class="h-4 w-4 text-pink-600 border-gray-300">
                    </div>
                </div>
            </div>

            <!-- 底部结算栏 -->
            <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white p-3 border-t flex justify-between items-center">
                <div>
                    <span class="text-xs text-gray-500">实付款</span>
                    <span class="text-pink-600 font-bold text-xl ml-1">¥199.00</span>
                </div>
                <button class="px-6 py-2 bg-pink-600 text-white rounded-full" onclick="showPage('payment-success-page')">立即支付</button>
            </div>
        </div>

        <!-- 支付成功页 -->
        <div id="payment-success-page" class="page">
            <div class="flex flex-col items-center justify-center p-8 h-full">
                <div class="bg-green-100 rounded-full p-4 flex items-center justify-center w-20 h-20 mb-6">
                    <span class="material-icons text-4xl text-green-600">check</span>
                </div>
                <h2 class="text-2xl font-bold mb-2">支付成功</h2>
                <p class="text-gray-500 mb-8">订单已完成支付，预约成功！</p>
                <div class="space-y-4 w-full">
                    <button class="w-full py-3 bg-pink-600 text-white rounded-lg" onclick="showPage('order-detail-page')">查看订单详情</button>
                    <button class="w-full py-3 border border-gray-300 rounded-lg" onclick="showPage('home-page')">返回首页</button>
                </div>
            </div>
        </div>

        <!-- 订单列表页 -->
        <div id="orders-page" class="page">
            <!-- 顶部导航栏 -->
            <div class="bg-white p-4 shadow-md">
                <h1 class="text-xl font-bold text-center">我的订单</h1>
            </div>

            <!-- 订单状态切换 -->
            <div class="bg-white sticky top-0 z-10 border-b">
                <div class="flex">
                    <div class="flex-1 px-4 py-3 text-center border-b-2 border-pink-600 text-pink-600 font-medium">全部</div>
                    <div class="flex-1 px-4 py-3 text-center">待拍摄</div>
                    <div class="flex-1 px-4 py-3 text-center">拍摄中</div>
                    <div class="flex-1 px-4 py-3 text-center">已完成</div>
                </div>
            </div>

            <!-- 订单列表 -->
            <div class="p-4 space-y-4 pb-20">
                <div class="bg-white rounded-lg shadow p-4" onclick="showPage('order-detail-page')">
                    <div class="flex justify-between mb-2">
                        <h3 class="font-medium">樱花摄影</h3>
                        <span class="text-pink-600">待拍摄</span>
                    </div>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded-md">
                        <div class="ml-3 flex-1">
                            <p class="text-sm">基础写真套餐</p>
                            <p class="text-xs text-gray-500 mt-1">7月15日 10:00-10:30</p>
                            <p class="text-xs text-gray-500">2024夏日动漫节</p>
                        </div>
                    </div>
                    <div class="flex justify-between mt-3 pt-3 border-t border-gray-100">
                        <div>
                            <span class="text-xs text-gray-500">订单金额：</span>
                            <span class="text-pink-600 font-medium">¥199.00</span>
                        </div>
                        <div>
                            <button class="px-4 py-1 border border-pink-600 text-pink-600 rounded-full text-sm">取消订单</button>
                            <button class="ml-2 px-4 py-1 bg-pink-600 text-white rounded-full text-sm">联系摄影师</button>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow p-4">
                    <div class="flex justify-between mb-2">
                        <h3 class="font-medium">星空影像</h3>
                        <span class="text-green-600">拍摄中</span>
                    </div>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1554048612-b6a482bc67e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded-md">
                        <div class="ml-3 flex-1">
                            <p class="text-sm">高级写真套餐</p>
                            <p class="text-xs text-gray-500 mt-1">6月20日 15:00-16:00</p>
                            <p class="text-xs text-gray-500">魔法动漫嘉年华</p>
                        </div>
                    </div>
                    <div class="flex justify-between mt-3 pt-3 border-t border-gray-100">
                        <div>
                            <span class="text-xs text-gray-500">订单金额：</span>
                            <span class="text-pink-600 font-medium">¥399.00</span>
                        </div>
                        <div>
                            <button class="px-4 py-1 bg-pink-600 text-white rounded-full text-sm">查看进度</button>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow p-4">
                    <div class="flex justify-between mb-2">
                        <h3 class="font-medium">阳光工作室</h3>
                        <span class="text-gray-600">已完成</span>
                    </div>
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-16 h-16 object-cover rounded-md">
                        <div class="ml-3 flex-1">
                            <p class="text-sm">团体拍摄套餐</p>
                            <p class="text-xs text-gray-500 mt-1">5月10日 13:00-15:00</p>
                            <p class="text-xs text-gray-500">春日ACG大会</p>
                        </div>
                    </div>
                    <div class="flex justify-between mt-3 pt-3 border-t border-gray-100">
                        <div>
                            <span class="text-xs text-gray-500">订单金额：</span>
                            <span class="text-pink-600 font-medium">¥599.00</span>
                        </div>
                        <div>
                            <button class="px-4 py-1 border border-gray-300 text-gray-600 rounded-full text-sm">查看照片</button>
                            <button class="ml-2 px-4 py-1 bg-pink-600 text-white rounded-full text-sm">评价</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white navbar">
                <div class="flex justify-around p-3">
                    <div class="text-center text-gray-500" onclick="showPage('home-page')">
                        <span class="material-icons block mx-auto">home</span>
                        <span class="text-xs">首页</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('photographers-page')">
                        <span class="material-icons block mx-auto">camera_alt</span>
                        <span class="text-xs">摄影师</span>
                    </div>
                    <div class="text-center text-pink-600">
                        <span class="material-icons block mx-auto">assignment</span>
                        <span class="text-xs">订单</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('profile-page')">
                        <span class="material-icons block mx-auto">person</span>
                        <span class="text-xs">我的</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单详情页 -->
        <div id="order-detail-page" class="page">
            <!-- 顶部导航栏 -->
            <div class="bg-white p-4 shadow-md flex items-center">
                <span class="material-icons" onclick="showPage('orders-page')">arrow_back</span>
                <h1 class="text-xl font-bold ml-4">订单详情</h1>
                <div class="ml-auto">
                    <span class="material-icons">more_vert</span>
                </div>
            </div>

            <!-- 订单状态 -->
            <div class="bg-gradient-to-r from-pink-500 to-pink-600 p-4 text-white">
                <div class="flex justify-between items-center">
                    <div>
                        <h2 class="text-lg font-bold">待拍摄</h2>
                        <p class="text-sm mt-1 text-white text-opacity-80">预约时间：7月15日 10:00-10:30</p>
                    </div>
                    <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <span class="material-icons text-3xl">pending_actions</span>
                    </div>
                </div>
            </div>

            <!-- 进度条 -->
            <div class="p-4 bg-white">
                <div class="flex justify-between relative">
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-pink-600 flex items-center justify-center text-white text-xs z-10">1</div>
                        <p class="text-xs mt-1 text-pink-600 font-medium">预约成功</p>
                        <p class="text-xs text-gray-400">7/10 14:30</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs z-10">2</div>
                        <p class="text-xs mt-1 text-gray-500">拍摄中</p>
                        <p class="text-xs text-gray-400">待开始</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs z-10">3</div>
                        <p class="text-xs mt-1 text-gray-500">后期处理</p>
                        <p class="text-xs text-gray-400">待开始</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xs z-10">4</div>
                        <p class="text-xs mt-1 text-gray-500">完成交付</p>
                        <p class="text-xs text-gray-400">待完成</p>
                    </div>
                    <div class="absolute top-4 left-8 right-8 h-1 bg-gray-200"></div>
                    <div class="absolute top-4 left-8 w-0 h-1 bg-pink-600"></div>
                </div>
            </div>

            <!-- 摄影师信息 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">摄影师信息</h3>
                <div class="flex items-center">
                    <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-16 h-16 object-cover rounded-full">
                    <div class="ml-3 flex-1">
                        <h4 class="font-medium">樱花摄影</h4>
                        <div class="flex items-center mt-1">
                            <span class="text-yellow-400 text-sm">★★★★★</span>
                            <span class="text-gray-500 text-xs ml-1">5.0 (94评)</span>
                        </div>
                    </div>
                    <button class="px-4 py-1 border border-pink-600 text-pink-600 rounded-full text-sm flex items-center">
                        <span class="material-icons text-sm mr-1">chat</span>
                        <span>联系</span>
                    </button>
                </div>
            </div>

            <!-- 订单信息 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">订单信息</h3>
                <div class="space-y-3">
                    <div class="flex justify-between">
                        <span class="text-gray-600">订单编号</span>
                        <span class="text-gray-800">COS20240710142536</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">套餐类型</span>
                        <span class="text-gray-800">基础写真套餐</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">漫展活动</span>
                        <span class="text-gray-800">2024夏日动漫节</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">预约日期</span>
                        <span class="text-gray-800">2024年7月15日</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">预约时间</span>
                        <span class="text-gray-800">10:00-10:30</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">联系人</span>
                        <span class="text-gray-800">张三</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">联系电话</span>
                        <span class="text-gray-800">138****6666</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">备注</span>
                        <span class="text-gray-800">希望有一些动漫风格的场景拍摄</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">下单时间</span>
                        <span class="text-gray-800">2024-07-10 14:25:36</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600">支付方式</span>
                        <span class="text-gray-800">微信支付</span>
                    </div>
                    <div class="border-t border-gray-100 pt-3">
                        <div class="flex justify-between font-bold">
                            <span>订单金额</span>
                            <span class="text-pink-600">¥199.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部按钮 -->
            <div class="mt-2 p-4 bg-white mb-24">
                <div class="flex justify-between">
                    <button class="w-1/2 mr-2 py-2 border border-gray-300 rounded-lg text-gray-600">取消订单</button>
                    <button class="w-1/2 ml-2 py-2 bg-pink-600 text-white rounded-lg">联系客服</button>
                </div>
            </div>
        </div>

        <!-- 个人中心页 -->
        <div id="profile-page" class="page">
            <!-- 顶部用户信息 -->
            <div class="bg-gradient-to-r from-pink-500 to-pink-600 p-6 text-white">
                <div class="flex items-center">
                    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-20 h-20 object-cover rounded-full border-2 border-white">
                    <div class="ml-4">
                        <h2 class="text-xl font-bold">小王同学</h2>
                        <p class="text-white text-opacity-80 mt-1">ID: 123456789</p>
                    </div>
                    <div class="ml-auto">
                        <span class="material-icons">settings</span>
                    </div>
                </div>
                <div class="flex justify-between mt-6">
                    <div class="text-center">
                        <p class="text-xl font-bold">3</p>
                        <p class="text-sm text-white text-opacity-80">预约次数</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xl font-bold">2</p>
                        <p class="text-sm text-white text-opacity-80">收藏摄影师</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xl font-bold">230</p>
                        <p class="text-sm text-white text-opacity-80">收到照片</p>
                    </div>
                </div>
            </div>

            <!-- 功能区 -->
            <div class="p-4 bg-white grid grid-cols-4 gap-4 text-center">
                <div>
                    <div class="bg-pink-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-pink-600">photo_album</span>
                    </div>
                    <span class="text-xs">我的相册</span>
                </div>
                <div>
                    <div class="bg-blue-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-blue-600">favorite</span>
                    </div>
                    <span class="text-xs">我的收藏</span>
                </div>
                <div>
                    <div class="bg-green-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-green-600">card_giftcard</span>
                    </div>
                    <span class="text-xs">优惠券</span>
                </div>
                <div>
                    <div class="bg-purple-100 rounded-full p-3 mx-auto w-12 h-12 flex items-center justify-center mb-1">
                        <span class="material-icons text-purple-600">wallet</span>
                    </div>
                    <span class="text-xs">我的钱包</span>
                </div>
            </div>

            <!-- 我的服务 -->
            <div class="mt-2 p-4 bg-white">
                <h3 class="font-bold mb-3">我的服务</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center py-2 border-b">
                        <div class="flex items-center">
                            <span class="material-icons text-pink-600 mr-3">help_outline</span>
                            <span>帮助中心</span>
                        </div>
                        <span class="material-icons text-gray-400">chevron_right</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b">
                        <div class="flex items-center">
                            <span class="material-icons text-pink-600 mr-3">feedback</span>
                            <span>意见反馈</span>
                        </div>
                        <span class="material-icons text-gray-400">chevron_right</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b">
                        <div class="flex items-center">
                            <span class="material-icons text-pink-600 mr-3">support_agent</span>
                            <span>联系客服</span>
                        </div>
                        <span class="material-icons text-gray-400">chevron_right</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b">
                        <div class="flex items-center">
                            <span class="material-icons text-pink-600 mr-3">info</span>
                            <span>关于我们</span>
                        </div>
                        <span class="material-icons text-gray-400">chevron_right</span>
                    </div>
                </div>
            </div>

            <!-- 推荐摄影师 -->
            <div class="mt-2 p-4 bg-white mb-20">
                <div class="flex justify-between items-center mb-3">
                    <h3 class="font-bold">推荐摄影师</h3>
                    <a class="text-pink-600 text-sm" onclick="showPage('photographers-page')">更多</a>
                </div>
                <div class="flex overflow-x-auto space-x-4 pb-2">
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">青柠摄影</p>
                        <p class="text-xs text-gray-500">COS专业</p>
                    </div>
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1614283233556-f35b0c801ef1?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">京都影像</p>
                        <p class="text-xs text-gray-500">场景写真</p>
                    </div>
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">幻彩摄影</p>
                        <p class="text-xs text-gray-500">特效后期</p>
                    </div>
                    <div class="flex-shrink-0 w-24">
                        <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" class="w-24 h-24 object-cover rounded-md mb-1">
                        <p class="text-xs font-medium">光影工作室</p>
                        <p class="text-xs text-gray-500">角色扮演</p>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white navbar">
                <div class="flex justify-around p-3">
                    <div class="text-center text-gray-500" onclick="showPage('home-page')">
                        <span class="material-icons block mx-auto">home</span>
                        <span class="text-xs">首页</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('photographers-page')">
                        <span class="material-icons block mx-auto">camera_alt</span>
                        <span class="text-xs">摄影师</span>
                    </div>
                    <div class="text-center text-gray-500" onclick="showPage('orders-page')">
                        <span class="material-icons block mx-auto">assignment</span>
                        <span class="text-xs">订单</span>
                    </div>
                    <div class="text-center text-pink-600">
                        <span class="material-icons block mx-auto">person</span>
                        <span class="text-xs">我的</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面切换功能
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示目标页面
            document.getElementById(pageId).classList.add('active');
            
            // 如果是未登录用户访问个人中心或订单页，跳转到登录页
            if((pageId === 'profile-page' || pageId === 'orders-page') && !isLoggedIn()) {
                document.getElementById('login-page').classList.add('active');
                document.getElementById(pageId).classList.remove('active');
            }
        }
        
        // 模拟登录状态检查
        function isLoggedIn() {
            // 实际应用中，这里应该检查本地存储或Cookie中的登录状态
            // 为了演示，这里返回true表示已登录
            return true;
        }
        
        // 页面加载完成后，根据URL参数显示指定页面
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const page = urlParams.get('page');
            if(page) {
                showPage(page);
            }
        });
    </script>
</body>
</html> 